<template>
    <div class="swipe-bg" :style="{ background: data.data.data[cur]?.color }">
        <el-image
            class="swipe-bg-arc"
            src="https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230428_e057bf1997730717f2797a91236231bd.png!img_400"
            fit="cover"
        />
    </div>
    <div class="swipe-boxs" :style="{ height: `${data.rpxStyle.height}px`, borderRadius: `${data.rpxStyle['border-radius']}px` }">
        <el-carousel
            arrow="never"
            :interval="data.data.interval"
            :height="`${data.rpxStyle.height}px`"
            v-if="data.data.data && data.data.data.length"
            @change="changeSwipes"
        >
            <el-carousel-item v-for="(item, index) in data.data.data" :key="index">
                <el-image
                    :style="{
                        height: `${data.rpxStyle.height}px`,
                        width: '100%',
                        borderRadius: `${data.rpxStyle['border-radius']}px`,
                    }"
                    :src="item.url"
                    fit="cover"
                />
            </el-carousel-item>
        </el-carousel>
        <img v-else src="https://img01.yzcdn.cn/public_files/2019/03/05/2b60ed750a93a1bd6e17fc354c86fa78.png" style="width: 100%; height: 100%" />
    </div>
</template>

<script setup>
import { ref } from "vue"

/**
 * 轮播图
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 1,
            type_name: "swiper", //金刚区导航
            text: "轮播图",
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                /* 当没有请求地址的时候，使用data数据 */
                data: [],
            },
        },
    },
})

const emits = defineEmits(["change"])

const cur = ref(0)
const changeSwipes = (index) => {
    cur.value = index
    emits("change", index)
}
</script>

<style lang="less" scoped>
.swipe-bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75px;
    transition: all 0.5s;
}
.swipe-bg-arc {
    position: absolute;
    left: 0;
    bottom: 0;
}
.swipe-boxs {
    position: relative;
    z-index: 11;
    overflow: hidden;
}
:deep(.el-carousel__button) {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    overflow: hidden;
}
</style>
